<template>
  <div class="cesium">
    <!-- 地图容器 -->
    <div id="cesiumContainer" style="width: 100%;height: 800px;"></div>
    <!-- 功能列表 -->
    <div class="list">
      <Button type="info" size="small" @click="getPosition()">获取点击定位</Button>
      <Button type="info" size="small" @click="addMarker()">添加一个点</Button>
      <Button type="info" size="small">测距</Button>
      <Button type="info" size="small">绘制多边形</Button>
      <Button type="info" size="small">清除测距</Button>
      <Button type="info" size="small">清除多边形</Button>
    </div>
    <!-- 气泡(单体化内容显示) -->
    <div ref="bubble" class="bubble">
      <div>名称：{{monomer.name}}</div>
      <div>楼层：{{monomer.floor}}</div>
      <div>用途：{{monomer.purpose}}</div>
      <div>地址：{{monomer.address}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cesium',
  data () {
    return {
      viewer: null,
      scene: null,
      promise: null,
      camera: null,
      widget: null,
      monomer: {  //  单体化
        name: '',
        floor: '',
        purpose: '',
        address: ''
      }
    }
  },
  mounted () {
    this.$nextTick( () => {
      this.creatCesium()  //  创建地图
      this.cesiumInit()  //  地图初始化
      this.haplochromatization() //  单体化
      // this.getPosition()  //  获取点击定位
      // this.addMarker() //  添加一个点
      // this.distance() //  测距
      // this.polygon()  //  绘制多边形
      // this.clearDistance() //  清除测距
      // this.clearPolygon() //  清除多边形
      // this.other()
    })
  },
  methods: {
    //  地图创建
    creatCesium () {
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        // animation: true, //是否显示动画控件(左下方那个)
        // baseLayerPicker: true, //是否显示图层选择控件
        // geocoder: true, //是否显示地名查找控件
        // timeline: true, //是否显示时间线控件
        // sceneModePicker: true, //是否显示投影方式控件
        // navigationHelpButton: false, //是否显示帮助信息控件
        // infoBox: true, //是否显示点击要素之后显示的信息
        imageryProvider: new Cesium.TiandituImageryProvider({
          credit: new Cesium.Credit('天地图全球影像服务     数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局')
        })
      })
    },
    //  地图初始化
    cesiumInit () {
        this.scene = this.viewer.scene //	创建一个地图场景
        //  添加三维切片缓存图层（实景拍摄地图url）
        this.promise = this.scene.addS3MTilesLayerByScp('http://221.2.244.68:10107/iserver/services/3D-ruanjianyuan/rest/realspace/datas/Config/config', {
          name: 'ruanjianyuan'
        })
        //  设置地图锁定位置、倾斜角度等
        this.scene.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(118.69682, 37.41706, 240), //  地图锁定坐标点
          orientation : {
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-45),
            roll : 0 
          }
        })
        //	隐藏版权信息
        this.viewer._cesiumWidget._creditContainer.style.display = "none"
        //  添加基础拖放功能
        this.viewer.extend(Cesium.viewerDragDropMixin)
        //  处理删除文件时遇到错误，显示弹出式警告。
        this.viewer.dropError.addEventListener(function(dropHandler, name, error) {
          console.log(error, '删除文件时遇到错误')
          window.alert(error)
        })
    },
    //  添加单体化功能
    haplochromatization () {
      this.viewer.customInfobox = this.$refs.bubble //  气泡设置
      var that = this
      //  初始化单体化
      Cesium.when(this.promise, function (layer) {
        if (!that.scene.pickPositionSupported) {
          alert('您的浏览器不支持深度拾取, 属性查询功能无法使用！');
        } else {
          //  设置属性查询参数--单体化·
          layer.setQueryParameter({
            url: 'http://221.2.244.68:10107/iserver/services/data-ruanjianyuan/rest/data',  //  数据集url
            dataSourceName: 'yuan',
            dataSetName: 'New_Region',
            keyWord: 'SmID'
          })
        }
      })
      //  注册鼠标点击事件（单体化点击事件）
      this.viewer.pickEvent.addEventListener(function(feature){
        console.log(feature, '单体化返回')
        that.monomer.name = Cesium.defaultValue(feature.NAME,'')	//	名称
        that.monomer.floor = Cesium.defaultValue(feature.FLOOR,'')	//	楼层
        that.monomer.purpose = Cesium.defaultValue(feature.PURPOSE,'')	//	用途
        that.monomer.address = Cesium.defaultValue(feature.ADDRESS,'')	//	地址
      })
    },
    //  测距
    distance () {
    },
    //  绘制区域
    polygon () {
    },
    //  清除测距
    clearDistance () {
      handlerDis.clear()  //  清除测距
    },
    //  清除多边形
    clearPolygon () {
      handlerPolygon.clear()  //  清除多边形
    },
    //  其他功能 （如需调用需要更改全局指针this）
    other () {
      //  获取相机高度（不是地图高度）
      var height = Math.ceil(this.viewer.camera.positionCartographic.height)
      // console.log(height, 'height')

      //  坐标系
      new Cesium.Cartesian2(1,1) //表示一个二维笛卡尔坐标系，也就是直角坐标系（屏幕坐标系）
      new Cesium.Cartesian3(1,1,1) //表示一个三维笛卡尔坐标系，也是直角坐标系(就是真实世界的坐标系)

      //   二维屏幕坐标系到三维坐标系的转换
      var pick1= scene.globe.pick(this.viewer.camera.getPickRay(pt1), scene) //其中pt1为一个二维屏幕坐标。

      //  三维坐标到地理坐标的转换
      var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) //其中pick1是一个Cesium.Cartesian3对象。

      //   地理坐标到经纬度坐标的转换
      var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180] //其中geoPt1是一个地理坐标。

      //  经纬度坐标转地理坐标（弧度）
      var cartographic = Cesium.Cartographic.fromDegree(point) //point是经纬度值
      var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//单位：度，度，米 

      //   经纬度坐标转世界坐标
      var cartesian = Cesium.Cartesian3.fromDegree(point)

      //  添加点（会根据地图缩放改变大小）  Entity 3D对象
      // 这种方式会以最大最小值为缩放边界，采用entity的方式会完全根据地图进行缩放
      var scene = this.viewer.scene;
      var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-123.0745725, 44.0503706))
      var model = scene.primitives.add(Cesium.Model.fromGltf({
          url: 'data/Cesium_Ground.gltf',
          color : Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(0.5)),//模型颜色，透明度
          silhouetteColor : Cesium.Color.fromAlpha(Cesium.Color.GREEN, parseFloat(0.5)),//轮廓线
          colorBlendMode : Cesium.ColorBlendMode.MIX,//模型样式['Highlight', 'Replace', 'Mix']
          modelMatrix: modelMatrix,
          minimumPixelSize : 256, // 最小的缩放尺寸，256个像素，就是一个瓦片的尺寸。
          maxiumScale: 2 // 最大的缩放倍数
      }))
      //  其中modelMatrix定义了对象的位置，第一种添加方式模型会自动按照gltf设置好的动画进行播放，第二种方式则需要添加下述代码设置动画。
    },



    //  以下功能方法
    //  以下功能方法
    //  以下功能方法



    //  添加一个点
    addMarker () {
      //添加一个实体，仅需要传递一个简单JSON对象，返回值是一个Entity对象
      this.viewer.entities.add({
        id: 1,
        name: 111,
        mark: 111,
        content: 111,
        position: Cesium.Cartesian3.fromDegrees(118.69682, 37.41706, 30),
        billboard: {
          image: 'static/img/map/logo.png',
          scale: 0.2,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        },
        //  添加label标注（图标下边的文字）
        label: {
          text: '这是一个点',  //  标注名称
          font: '14px SimHei ',
          Width: 3,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.AQUA,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.TOP
        }
      })
    },
    //  获取地图的点击位置
    getPosition () {
      var that = this
      // 获取场景模式拾取器对象: 定义当前场景的画布元素的事件处理
      var handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas)
      //  绑定鼠标点击事件
      handler.setInputAction(function (event) {
        // var pick = this.scene.pick(event.position) //  场景拾取：  接收三个参数： pick （windowPosition，width，height）
        console.log(event)  //  返回笛卡尔坐标
        //  将笛卡尔坐标转化为经纬度坐标
				var position = that.scene.pickPosition(event.position)  //  位置拾取：返回笛卡尔坐标，需要支持深度纹理。
				var cartographic = Cesium.Cartographic.fromCartesian(position)
				var longitude = Cesium.Math.toDegrees(cartographic.longitude) //  维度
				var latitude = Cesium.Math.toDegrees(cartographic.latitude) //  经度
        var height = cartographic.height  //  地图高度
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    }
  }
}
</script>

<style>
  .cesium{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .cesium .cesium-viewer-bottom{
    display: none;
  }
  .cesium .list{
    width: 120px;
    height: 300px;
    padding: 10px;
    background: #f5f7f9;
    box-shadow: 3px 3px 3px #303643;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
  }
  .bubble>div{
    padding: 4px;
    text-align: left;
  }
  .cesium .list button{
    margin-bottom: 10px;
  }
  /*---- bubble 气泡 -----*/
  .bubble {
      text-align:center;
      position: absolute;
      padding: 10px 18px;
      margin: 0;
      color: #fff;
      background: rgba(0,0,0,0.8);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border: 1px solid #4a9cd8;
      box-shadow: 0 0 10px #4a9cd8;
      max-width : 330px;
      max-height: 250px;
      min-width: 100px;
  }
  .bubble:after {
      content: "";
      position: absolute;
      bottom: -13px;
      left: 52px;
      border-left: 13px solid transparent;
      border-top: 13px solid rgba(0,0,0,0.9);
      border-right: 13px solid transparent;
      display: block;
      width: 0;
  }

  .bubble:before {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 50px;
      border-left: 15px solid transparent;
      border-top: 15px solid #4a9cd8;
      border-right: 15px solid transparent;
      display: block;
      width: 0;
  }

  #signBubbleTitle {
      font-size: 14px;
      text-align: left;
  }
  #signBubbleDes {
      font-size: 14px;
      text-align: left;
  }
  #des {
      text-align: left;
      font-size: 14px;
  }
  /*--- bubble 气泡 end ----*/


</style>

